<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body>
<div class=login-page id="regi-page">
    <div class="row title"><span>挂号预约系统</span></div>

    <div class="form-wrapper">
        <form action.stop="/register" method="post">
            <div class="tab-box">
                <span><a href="login.html">登录</a></span>
                <span class="selected"><a href="register.html">注册</a></span>
            </div>
            <div class="row"><input type="text" id="username" name="username" placeholder="请输入真实姓名" v-model="name"></div>
<!--            <div class="row"><input type="text" id="useremail" name="useremail" placeholder="请输入电子邮箱" v-model="email"></div>-->
            <div class="row"><input type="text" id="userphone" name="userphone" placeholder="请输入手机号" v-model="phone"></div>
            <div class="row"><input type="password" id="pswd" name="pswd" placeholder="请输入密码" v-model="password"></div>
            <div class="row">
                <span><label for="is-admin">管理员</label><input type="checkbox" name="admin" id="is-admin" v-model="isAdmin"></span>
                <span><label for="is-doctor">医生</label><input type="checkbox" name="doctor" id="is-doctor" v-model="isDoctor"></span>
            </div>
            <div class="row">
<!--                <input type="submit" value="注 册" class="btn">-->
                <div @click="regiSubmit" class="btn">注 册</div>
            </div>

        </form>
    </div>
</div>
</body>
<script src="assets/js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!--<script src="assets/js/jquery.js"></script>-->
<script src="assets/js/axios.js"></script>
<!--<script src="api/login.js"></script>-->
<script>

    new Vue({
        el: '#regi-page',
        data: function () {
            return {
                name: '',
                phone: '',
                // email: '',
                password: '',
                isAdmin: false,
                isDoctor: false,
                role: ['patient','admin','doctor']
            }
        },
        methods: {
            regiSubmit() {
                console.log('regi')
                let role = this.role[0]
                if(this.isAdmin&&!this.isDoctor) {
                    role = this.role[1]
                }
                if(this.isDoctor&&!this.isAdmin) {
                    role = this.role[2]
                }
                let data = {
                    name: this.name,
                    phoneNumber: this.phone,
                    // email: this.email,
                    role,
                    password: this.password
                }
                axios.put('UserMethodServlet', data)
                    .then(response => {
                        console.log(response);
                        if(response.status==200) {
                            ELEMENT.Message({
                                message: '注册成功！',
                                type: 'success'
                            });
                            // window.location = "login.html"
                        }
                        else {
                            ELEMENT.Message.error('注册失败');
                        }
                    })
                    .catch(error => {
                        console.log(error);
                        ELEMENT.Message.error('未知错误，请联系管理员');
                    });
            }

        }
    })

</script>
<style>
    body {
        padding: 0;
        margin: 0;
    }
    a {
        color: #000;
        text-decoration: none;
    }
    .login-page {
        width: 100%;
        height: 100vh;
        background: url("assets/img/main-bg4.png") no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .form-wrapper {
        width: 20vw;
        /*height: 25vw;*/
        border-radius: 0.5vw;
        background: rgba(255,255,255,0.3);
        padding: 1vw;
    }
    .form-wrapper form {
        background-color: #fff;
        border-radius: 0.5vw;
        padding: 1.5vw;
        margin: 0;
    }
    .row {
        display: flex;
        justify-content: space-between;
        padding: 0.4vw 0;
    }
    .title {
        font-size: 2vw;
        font-weight: 700;
        color: #fff;
        margin-bottom: 1vw;
    }
    .form-wrapper .tab-box {
        display: flex;
        justify-content: start;
        margin-bottom: 0.5vw;
    }
    .tab-box span {
        padding: 0.4vw 1.5vw;
        font-size: 1.1vw;
    }
    .tab-box .selected {
        border-bottom: 3px solid #409EFF;
    }
    .form-wrapper form input {
        width: 100%;
        padding: 0.7vw 0.5vw;
        border: 1px solid #ddd;
        border-radius: 0.25vw;
        font-size: 0.9vw;
    }
    input:focus {
        outline: none;
    }
    .row .btn {
        width: 100%;
        padding: 0.7vw 0.5vw;
        border: 1px solid #ddd;
        border-radius: 0.25vw;
        font-size: 0.9vw;
        margin: 1vw 0 1vw;
        background-color: #409EFF;
        color: #fff;
        text-align: center;
        user-select:none;
    }
    #is-admin,#is-doctor {
        width: 1vw;
        height: 1vw;
    }
</style>
</body>
</html>
